<template>
  <view>
    <u-navbar
      title="商品列表"
      back-icon-color="#2D405E"
      :title-bold="true"
      title-color="#2D405E"
      title-size="32"
      :border-bottom="false"
    ></u-navbar>
    <block v-if="$accessCheck($Access.PublishGoods)">
      <view class="keyword-view clearfix">
        <view class="float_left">
          <u-search
            @clear="searchList"
            @search="searchList"
            :show-action="false"
            :clearabled="true"
            placeholder="商品名称/编码/条码进行搜索"
            v-model="keyword"
            height="72"
            placeholder-color="#879BBA"
            color="#879BBA"
            bg-color="#ECF0F7"
            :focus="autoFocus"
            ref="searchInput"
          ></u-search>
        </view>
        <!-- <view class="float_right" v-if="$accessCheck($Access.PublishGoodsSearch)" @click="openSel('search_show')">
					<text class="custom-icon custom-icon-shaixuan"></text>
				</view> -->
        <view class="tabs-view">
          <view class="search-view clearfix">
            <view class="title ellipsis" @click="openSel('salesStatus_show')">
              <u-icon
                size="12"
                label-pos="left"
                label-color="#62738e"
                color="#b8c0c8"
                label-size="26"
                :label="salesStatus_name"
                name="arrow-down-fill"
                class="ico"
              ></u-icon>
            </view>
            <view
              class="title ellipsis"
              @click="goPage('/pagesT/brand/selBrand')"
            >
              <u-icon
                size="12"
                label-pos="left"
                label-color="#62738e"
                color="#b8c0c8"
                label-size="26"
                :label="brand_name"
                name="arrow-down-fill"
                class="ico"
              ></u-icon>
            </view>
            <view
              class="title ellipsis"
              @click="goPage('/pagesT/shop/selShop')"
            >
              <u-icon
                size="12"
                label-pos="left"
                label-color="#62738e"
                color="#b8c0c8"
                label-size="26"
                :label="shop_name"
                name="arrow-down-fill"
                class="ico"
              ></u-icon>
            </view>
            <view
              class="title ellipsis"
              style="line-height: 116rpx; color: #62738e"
              @click="clearValue()"
            >
              <text>重置</text></view
            >
          </view>
        </view>
      </view>
      <view class="catet-view"
        ><u-tabs
          name="title"
          :list="cateT_list"
          height="70"
          font-size="28"
          :current="cateT_current"
          @change="cateTchange"
        ></u-tabs
      ></view>
      <view class="main-view clearfix" :style="{ height: height }">
        <view class="left-view float_left">
          <scroll-view scroll-y="true" class="left-scroll">
            <view
              class="cate-li ellipsis"
              :class="[!category_id ? 'cate-on' : '']"
              @click="changeCate()"
              >全部
            </view>
            <view
              class="cate-li ellipsis"
              v-for="(item, index) in category_list"
              :key="index"
              @click="changeCate(item)"
              :class="[category_id === item.id ? 'cate-on' : '']"
            >
              {{ item.title }}
            </view>
          </scroll-view>
        </view>
        <view class="rigth-view float_left">
          <scroll-view
            scroll-y="true"
            class="rigth-scroll"
            @scrolltolower="moreGoods"
            :scroll-top="scrollTop"
            @refresherrefresh="refresherrefresh"
            :refresher-enabled="true"
            :refresher-triggered="refresher_triggered"
          >
            <view
              class="goods-li"
              v-for="(item, index) in goods_list"
              :key="index"
            >
              <view
                @click="
                  goPage(
                    `/pagesB/goods/SaleGoodsDetail?id=${item.id}&basicGoodsId=${item.basicGoodsId}`
                  )
                "
              >
                <view class="goods-main clearfix">
                  <image
                    class="goods-img float_left"
                    :src="item.images[0]"
                    mode="aspectFill"
                  ></image>
                  <view class="goods-info float_left">
                    <view class="goods-name">{{ item.title }}</view>
                    <view class="goods-code">{{ item.code }}</view>
                  </view>
                </view>
                <view class="goods-tag clearfix">
                  <view
                    class="tag-li"
                    :class="[item.enableStatus === 5 ? 'green' : 'red']"
                    >{{ item.enableStatus === 5 ? "上架" : "下架" }}</view
                  >
                  <view class="tag-li brand">{{ item.categoryName }}</view>
                  <view v-if="item.brandName" class="tag-li else">{{
                    item.brandName
                  }}</view>
                </view>
              </view>
              <view class="handel-btn">
                <view
                  v-if="$accessCheck($Access.PublishGoodsUpdateEnableStatus)"
                  class="btn-li"
                  @click="GoodsUpdateEnableStatus(item)"
                >
                  {{ item.enableStatus === 5 ? "下架" : "上架" }}
                </view>
                <view
                  v-if="$accessCheck($Access.PublishGoodsEditGoods)"
                  class="btn-li"
                  style="border-left: 1rpx solid #ecf0f7"
                  @click="editGoods(item)"
                >
                  编辑
                </view>
                <!-- <view v-if="$accessCheck($Access.PublishGoodsGetGoodsInfo)" class="btn-li"
									style="border-left: 1rpx solid #ECF0F7;"
									@click="goPage(`/pagesB/goods/SaleGoodsDetail?id=${item.id}&basicGoodsId=${item.basicGoodsId}`)">
									查看
								</view> -->
              </view>
            </view>
            <u-loadmore v-if="goods_list.length" :status="load_status" />
            <view v-if="!goods_list.length" class="empty-view"
              ><u-empty text="暂无商品" mode="favor"></u-empty>
            </view>
          </scroll-view>
        </view>
      </view>
      <addBtn @click="addBtnClick"></addBtn>
    </block>
    <view v-else class="empty-view"
      ><u-empty text="没有权限" mode="order"></u-empty
    ></view>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <uniStatusBar></uniStatusBar>
        <view class="form-view" style="padding-top: 45px">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="销售状态">
              <text
                v-for="(item, index) in status_list"
                :key="index"
                class="check-li"
                :class="[enableStatus === item.value ? 'active' : '']"
                @click="statusChange(item)"
              >
                {{ item.label }}
              </text>
            </u-form-item>
            <u-form-item label="品牌">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/brand/selBrand')"
              >
                <text class="float_left ellipsis">{{
                  brandId ? brand_name : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('brandId')">
                  <u-icon
                    :name="!brandId ? 'arrow-right' : 'close-circle-fill'"
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
            <u-form-item label="所属店铺">
              <view
                class="clearfix form-val"
                @click="goPage('/pagesT/shop/selShop')"
              >
                <text class="float_left ellipsis">{{
                  shopId ? shop_name : "请选择"
                }}</text>
                <view class="float_right" @click.stop="clearValue('shopId')">
                  <u-icon
                    :name="!shopId ? 'arrow-right' : 'close-circle-fill'"
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
          </u-form>
        </view>

        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchList">确定</view>
        </view>
      </view>
    </u-popup>
    <u-modal
      v-model="tip_show"
      @confirm="
        goPage('/pagesB/goods/AddSelGoods', $accessCheck($Access.AddBaseData))
      "
      @cancel="
        goPage(
          '/pagesT/goods/addGoods',
          $accessCheck($Access.PublishGoodsAddGoods)
        )
      "
      :show-cancel-button="true"
      cancel-text="商品资料"
      confirm-text="销售商品"
      content=" "
      title="请选择"
    ></u-modal>
    <u-select
      @confirm="salesStatusChange"
      v-model="salesStatus_show"
      :list="status_list"
    ></u-select>
    <!-- 底部tabbar -->
    <!-- <Tabbar v-model="tabbar_current"></Tabbar> -->
  </view>
</template>

<script>
import uniStatusBar from "@/components/uni-status-bar.vue";
export default {
  components: {
    uniStatusBar,
  },
  data() {
    return {
      autoFocus: false,
      refresher_triggered: false, //设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
      tabbar_current: 2,
      cateT_current: 0,
      cateT_list: [],
      tip_show: false,
      brandData: "",
      shopData: "",
      status_list: [
        {
          value: 5,
          label: "上架",
        },
        {
          value: 4,
          label: "下架",
        },
      ],
      search_show: false,
      load_status: "nomore",
      tab_current: 0,
      category_list: [], // 分类列表
      category_id: "", // 分类id
      category_t_id: "", // 分类二级id
      auditStatus: 2, // 审核状态
      isOption: "", // 是否是自选商品
      page: 1,
      pageSize: 10,
      total: 0,
      goods_list: [],
      brandId: "", //品牌
      brand_name: "所属品牌",
      keyword: "", //关键词
      enableStatus: "", //上下架
      shopId: "",
      shop_name: "所属店铺",
      scrollTop: -1,
      salesStatus_show: false,
      salesStatus_name: "全部商品",
    };
  },
  watch: {
    brandData(val) {
      if (val.id) {
        this.brandId = val.id;
        this.brand_name = val.title;
        this.searchList();
      }
    },
    shopData(val) {
      if (val) {
        this.shopId = val.id;
        this.shop_name = val.name;
        this.searchList();
      }
    },
  },
  computed: {
    height() {
      return this.cateT_list.length
        ? "calc(100vh - 388rpx)"
        : "calc(100vh - 308rpx)";
    },
    enterprise() {
      return this.$store.state.enterprise;
    },
  },
  onLoad(options) {
    this.getAllCategory();
    // 检查是否从首页跳转过来
    if (options && options.fromIndex) {
      this.autoFocus = true;
    }
  },
  onShow() {
    this.page = 1;
    this.getData();
  },
  methods: {
    cateTchange(index) {
      this.cateT_current = index;
      this.category_t_id = index ? this.cateT_list[index].id : "";
      this.scrollTop = 0;
      this.$nextTick(() => {
        this.scrollTop = -1;
      });
      this.page = 1;
      this.getData();
    },
    addBtnClick() {
      if (this.enterprise.scope === 4) {
        this.goPage(
          "/pagesB/goods/AddGoodsOneStore",
          this.$accessCheck(this.$Access.PublishGoodsAddBasicAndPublishGoods)
        );
      } else {
        this.tip_show = true;
      }
    },
    editGoods(item) {
      if (this.enterprise.scope === 4) {
        this.goPage("/pagesB/goods/AddGoodsOneStore?id=" + item.id);
      } else {
        this.goPage("/pagesB/goods/AddSelGoods?id=" + item.id);
      }
    },
    statusChange(row) {
      this.enableStatus = row.value;
    },
    GoodsUpdateEnableStatus(row) {
      uni.showModal({
        title: "提示",
        content: `确定要${row.enableStatus === 5 ? "下架" : "上架"}该商品吗？`,
        success: (res) => {
          if (res.confirm) {
            this.$u.api
              .GoodsUpdateEnableStatus({
                enableStatus: row.enableStatus === 5 ? 4 : 5,
                id: row.id,
              })
              .then((res) => {
                this.$u.toast("操作成功");
                this.searchList();
              });
          }
        },
      });
    },
    morehandel(item) {
      item.is_more = !item.is_more;
    },
    //  获取所有商品分类
    getAllCategory() {
      this.$u.api
        .getAllCategory({
          enableStatus: 5,
        })
        .then((res) => {
          this.category_list = res.data;
        });
    },
    // 切换分类
    changeCate(row) {
      this.scrollTop = 0;
      this.$nextTick(() => {
        this.scrollTop = -1;
      });
      if (row) {
        this.category_id = row.id;
        if (row.children) {
          const children = this.$u.deepClone(row.children);
          children.unshift({
            title: "全部",
            id: 0,
          });
          this.cateT_list = children;
        } else {
          this.cateT_list = [];
        }
      } else {
        this.category_id = 0;
        this.cateT_list = [];
      }
      this.category_t_id = "";
      this.cateT_current = 0;
      this.page = 1;
      this.getData();
    },
    // 滚动到底部，触发上拉加载
    moreGoods() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.getData();
      }
    },
    // 下拉刷新
    refresherrefresh() {
      this.refresher_triggered = true;
      this.page = 1;
      this.getData();
    },
    searchList() {
      this.search_show = false;
      this.page = 1;
      this.getData();
    },
    // 判断当前使用方法为列表接口还是搜索引擎接口 获取列表数据
    getData() {
      let categoryPath = "";

      if (this.category_id && this.category_t_id) {
        categoryPath = this.category_id + "," + this.category_t_id;
      } else if (this.category_id) {
        categoryPath = this.category_id;
      } else {
        categoryPath = "";
      }

      // 搜索参数规整
      const obj = {
        keyword: this.keyword,
        brandId: this.brandId,
        categoryPath: categoryPath,
        enableStatus: this.enableStatus,
        shopId: this.shopId,
      };
      const isKey = this.$utils.isSerch(obj);
      if (isKey) {
        this.getAllGoodsSearch(obj);
      } else {
        this.getAllGoods();
      }
    },
    // 获取商品列表
    getAllGoods() {
      this.load_status = "loading";
      let params = {
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$u.api
        .getAllGoods(params)
        .then((res) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
          if (this.page === 1) {
            this.goods_list = res.data;
          } else {
            this.goods_list = this.goods_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
        });
    },
    // 商品搜索
    getAllGoodsSearch(obj) {
      this.load_status = "loading";
      let params = {
        ...obj,
        page: this.page,
        pageSize: this.pageSize,
      };
      this.$u.api
        .getAllGoodsSearch(params)
        .then((res) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
          if (this.page === 1) {
            this.goods_list = res.data;
          } else {
            this.goods_list = this.goods_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
        })
        .catch((err) => {
          // 设置当前下拉刷新状态为false
          this.refresher_triggered = false;
        });
    },
    enableStatusConfirm(arr) {
      this.enableStatus = arr[0].value;
      this.enableStatus_name = arr[0].value ? arr[0].label : "";
      this.searchList();
    },
    clearProp(key) {
      this[key] = "";
      this[key + "_name"] = "";
      this.searchList();
    },
    openSel(key) {
      this[key] = true;
    },
    clearValue(key) {
      // if (!key) {
      // 	this.keyword = '';
      // 	this.brandId = '';
      // 	this.category_id = '';
      // 	this.enableStatus = '';
      // 	this.shopId = '';
      // 	this.searchList();
      // } else {
      // 	this[key] = '';
      // }
      this.keyword = "";
      this.brandId = "";
      this.category_id = "";
      this.enableStatus = "";
      this.shopId = "";
      this.salesStatus_name = "全部商品";
      this.brand_name = "所属品牌";
      this.shop_name = "所属店铺";
      this.searchList();
    },
    salesStatusChange(e) {
      this.enableStatus = e[0].value;
      this.salesStatus_name = e[0].label;
      this.searchList();
    },
  },
};
</script>

<style scoped lang="scss">
.tabs-view {
  width: 100%;
  background-color: #ffffff;

  .search-view {
    width: 100%;
    display: flex;

    .title {
      flex: 5;
      height: 102rpx;
      text-align: center;
      font-weight: 400;
      line-height: 102rpx;
    }
  }
}

.catet-view {
  border-bottom: 1px solid #f5f5f5;
}

.keyword-view {
  background-color: #ffffff;
  padding: 0 24rpx 0;

  .float_left {
    width: 100%;
  }

  .float_right {
    line-height: 64rpx;
    width: 50rpx;
    text-align: center;
    color: #666666;
  }
}

.main-view {
  height: calc(100vh - 106rpx);

  .left-view {
    width: 200rpx;
    background-color: #ffffff;
    height: 100%;

    .left-scroll {
      width: 100%;
      height: 100%;

      .cate-li {
        width: 100%;
        line-height: 80rpx;
        padding-left: 36rpx;
        color: #4b4b4b;
        background-color: #ffffff;
        font-size: 26rpx;
        font-weight: 400;
      }

      .cate-on {
        background-color: rgb(235, 240, 248);
        color: #000000;
        position: relative;
        font-weight: 600;
        font-size: 28rpx;

        &::before {
          content: "";
          display: block;
          width: 6rpx;
          height: 20rpx;
          background-color: $uni-color-primary;
          position: absolute;
          left: 14rpx;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }

  .rigth-view {
    width: calc(100% - 200rpx);
    background-color: #ffffff;
    height: 100%;

    .rigth-scroll {
      width: 100%;
      height: 100%;
      background-color: #f5f5f6;

      .goods-li {
        padding: 16rpx 0 0;
        margin: 20rpx 16rpx;
        border-bottom: 1px solid #f5f5f5;
        position: relative;
        background-color: #ffffff;
        border-radius: 8rpx;

        .goods-tag {
          // padding: 16rpx 0;
          margin: 16rpx 0 24rpx 16rpx;

          .tag-li {
            float: left;
            margin-right: 8rpx;
            min-width: 104rpx;
            height: 32rpx;
            font-size: 20rpx;
            text-align: center;
            line-height: 32rpx;
            border-radius: 4rpx;
            padding: 0 6rpx;
          }

          .brand {
            line-height: 28rpx;
            border-radius: 4rpx;
            border: 1rpx solid #fb5904;
            color: #fb5904;
          }

          .else {
            background-color: rgb(206, 242, 255);
            color: #32c5ff;
          }

          .red {
            background-color: rgb(255, 237, 238);
            color: #f67778;
          }

          .green {
            background-color: rgb(218, 248, 242);
            color: #00c395;
          }
        }

        .goods-main {
          margin-left: 16rpx;

          .goods-img {
            border-radius: 8rpx;
            width: 114rpx;
            height: 114rpx;
            margin-right: 16rpx;
          }

          .goods-info {
            width: 348rpx;

            .goods-name {
              -webkit-line-clamp: 1;
              font-size: 28rpx;
              color: #2d405e;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
            }

            .goods-code {
              font-size: 22rpx;
              padding-top: 6rpx;
              color: #62738e;
            }

            .goods-num {
              color: #999999;
              font-size: 22rpx;

              text {
                padding-right: 10rpx;
              }
            }
          }
        }

        .handel-btn {
          display: flex;
          height: 76rpx;
          border-top: 1px solid #ecf0f7;

          .btn-li {
            color: #879bba;
            font-size: 28rpx;
            line-height: 76rpx;
            flex: 3;
            text-align: center;
            // border: 1px solid #dddddd;
            // margin: 20rpx 10rpx 0;
            // border-radius: 8rpx;
          }
        }

        .more-btn {
          position: absolute;
          right: 20rpx;
          bottom: -120rpx;
          background-color: #ffffff;
          border-radius: 10rpx;
          padding: 0 20rpx;
          z-index: 9;
          box-shadow: 0px 3px 24rpx rgba(0, 0, 0, 0.1);

          .more-btn-li {
            font-size: 24rpx;
            line-height: 60rpx;
            text-align: center;
            border-bottom: 1px solid #f5f5f5;

            &:last-child {
              border: 0 none;
            }
          }
        }
      }
    }
  }
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
.search-pop {
  .active {
    border-color: #fb5904 !important;
    color: #fb5904 !important;
  }
}
</style>
